<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>进度</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../plugin/timeline/timeline.css">
		<style>
			* { touch-action: none; }
			.mui-card .mui-control-content {
				padding: 10px;
			}
			/*自定义样式*/
			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			a{
				color: #ffffff;
			}
			.mui-content{
				width: 100%;
				height: 100%;
				background: #ffffff;
			}
			.mui-bar{
				background:#4F77AA ;
				color: #ffffff;
				-webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
    			box-shadow: 0 0 1px rgba(0,0,0,0);
			}
			.mui-title{
				color: #ffffff;
			}
			.content_item{
				width: 100%;
				height: 100%;
			}
			.content_item .mui-control-content{
				width: 100%;
				height: 100%;
			}
			
			.mui-segmented-control{
				width: 50%;
				margin-left: 25%;
				border: 1px solid #4F77AA;
				border-radius: 15px;
			}
			.mui-segmented-control .mui-control-item{
				line-height: 30px;
			}
			.mui-segmented-control .mui-control-item1{
				border-radius: 15px 0 0 15px;
			}
			
			.color-primary{
				background: #1ab394;
			}
			.color-success {
			    background: #08B107;
				}
			.color-info {
			    background: #23c6c8;
			}
			.color-warning {
			    background: #f8ac59;
			}
			.color-wait{
				background: #FB665F;
			}
			.NodeDetail-content p{
				text-indent: 0rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
			<h1 class="mui-title">进度</h1>
		</header>
		<div class="mui-content">
			<div class="content_item">
				<div id="item1" class="mui-control-content mui-active">
					<div id="scroll" class="mui-scroll-wrapper">
						<div class="mui-scroll">
						<div class="flowChart">
			<!--左侧轴-->
			<div class="flowChart-left">
				<!--虚线-->
				<div class="dashed"></div>
			</div>
			<!--右侧内容-->
			<div class="flowChart-right">
				<!--一个节点-->
				<div class="oneNode">
					<!--左侧小球-->
					<div class="check check-danger">
						报修
					</div>
					<div class="tag-boder">
						<div class="tag">
						</div>
					</div>
					<!--右侧内容-->
					<div class="NodeDetail">
						<!--上-->
<!-- 						<div class="NodeDetail-title">
							
							内容
							<div class="details">
								<h4>报修</h4>
							</div>
						</div> -->
						<!--中-->
						<div class="NodeDetail-content">
							<p>报修人员：<span>张三</span></p>
							<p>报修时间：<span>2019-4-2 19:54:58</span></p>
							<p>报修设备：<span>空调</span></p>
							<p>报修要求：<span>空调里面的制冷不能制冷问题空调里面的制冷不能制冷问题空调里面的制冷不能制冷问题空调里面的制冷不能制冷问题空调里面的制冷不能制冷问题</span></p>
						</div>
						<!--下-->
						<!-- <div class="NodeDetail-footer">
							<span>2017-10-31 22:22:31</span>

						</div> -->
					</div>
				</div>
				<div class="oneNode">
					<!--左侧小球-->
					<div class="check check-success">
						抢单
					</div>
					<div class="tag-boder">
						<div class="tag">
						</div>
					</div>
					<!--右侧内容-->
					<div class="NodeDetail">
						<!--上-->
						<div class="NodeDetail-title">
							<!--内容-->
							<div class="details">
								<h4>抢单</h4>
								<p>抢单时间：<span>2019-4-2 19:54:58</span></p>
							</div>
						</div>
						<!--中-->
						<div class="NodeDetail-content">
							<p>抢单人员：<span>王五</span></p>
							<p>抢单状态：<span>抢单成功</span></p>
						</div>
						<!--下-->
						<!-- <div class="NodeDetail-footer">
							<span>2017-10-31 22:22:31</span>

						</div> -->
					</div>
				</div>
				<div class="oneNode">
					<!--左侧小球-->
					<div class="check check-warning">
						维修
					</div>
					<div class="tag-boder">
						<div class="tag">
						</div>
					</div>
					<!--右侧内容-->
					<div class="NodeDetail">
						<!--上-->
						<div class="NodeDetail-title">
							<!--内容-->
							<div class="details">
								<h4>维修</h4>
								<p></p>
							</div>
						</div>
						<!--中-->
						<div class="NodeDetail-content">

							<p>暂无</p>
						</div>
						<!--下-->
						<!-- <div class="NodeDetail-footer">
							<span>2017-10-31 22:22:31</span>

						</div> -->
					</div>
				</div>
				<div class="oneNode">
					<!--左侧小球-->
					<div class="check">
						结束
					</div>
					<div class="tag-boder">
						<div class="tag">
						</div>
					</div>
					<!--右侧内容-->
					<div class="NodeDetail">
						<!--上-->
						<div class="NodeDetail-title">
							<!--内容-->
							<div class="details">
								<h4>结束</h4>
								<p></p>
							</div>
						</div>
						<!--中-->
						<div class="NodeDetail-content">
							<p>暂无</p>
						</div>
						<!--下-->
						<!-- <div class="NodeDetail-footer">
							<span>2017-10-31 22:22:31</span>

						</div> -->
					</div>
				</div>
			</div>
		</div>
		
						
						</div>
					</div>
				</div>

			</div>
		</div>
		<script src="../js/jquery-1.11.3.js"></script>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui('body').on('tap','a',function(){
				window.top.location.href=this.href;
			});
			(function($) {
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});
				var segmentedControl = document.getElementById('segmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						var styleEl = document.querySelector('input[name="style"]:checked');
						var colorEl = document.querySelector('input[name="color"]:checked');
						if (styleEl && colorEl) {
							var style = styleEl.value;
							var color = colorEl.value;
							segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
						}
					}
				});
			})(mui);

			$(document).on("click","span.mui-pull-left",function(){
				window.location.href="../../index.html";
			})
		</script>

	</body>

</html>